<%-- 
    Document   : pagina_testes
    Created on : 24/11/2011, 18:16:46
    Author     : leonardo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script language="javascript">
            function inserirLinhaTabela() {
                var table = document.getElementById("minhaTabela");
                
                var nlinhas = table.rows.length;
                var ncolunas = table.rows[nlinhas-1].cells.length;
                var novaLinha = table.insertRow(nlinhas);
                
                for (var j = 0; j < ncolunas; j++) {
                    newCell = novaLinha.insertCell(j);
                    newCell.innerHTML = "conteúdo " + nlinhas;
                }
                newCell.innerHTML = "<a href='#' onclick='removerLinhaTabela(this.parentNode.parentNode.rowIndex)'>remover</a>";
            }
            
            function removerLinhaTabela(i){
                var table = document.getElementById("minhaTabela");
                if (table.rows.length > 1) {
                    table.deleteRow(i);
                }
            }
        </script>
        <style type="text/css">
            #bloco {
                width: 200px;
                height: 600px;
                background: #33C;
            }
        </style>
    </head>
    <body>
        <h1>Teste com Tables (HTML e JavaScript)...</h1>
        <div id="bloco">
        <br>
        <input type="button" value="Inserir" onclick="inserirLinhaTabela()"  />
        <br>        
        <table id="minhaTabela" border="1">
            <tr>
                <td>conteúdo</td>
                <td>conteúdo</td>
                <td><a href="#" onclick="removerLinhaTabela(this.parentNode.parentNode.rowIndex)">remover</a></td>
            </tr>
        </table>
        </div>
        <!-- Este botão quando acionado irá chamar a função responsável em inserir a linha na tabela -->
    </body>
</html>
